<template>
    <div class="tag-container">
      <ul class="tag-box">
        <li class="tag-item" v-for="item in data">
          <span>{{item.content}}</span>
          <span v-show="item.length">({{item.length}})</span>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
      name: "tag",
      props: {
        data: {
          type: Array,
          default: null
        }
      }
    }
</script>

<style scoped>
  .tag-container{
    padding-bottom: 18px;/*rem*/
    border-bottom: 1px dotted #f5f5f5;
  }
  .tag-container .tag-box{
    overflow: hidden;
  }
  .tag-container .tag-box .tag-item{
    float: left;
    margin: 18px 12px 0 12px;/*rem*/
    font-size: 20px;/*px*/
    height: 60px;/*rem*/
    line-height: 60px;/*rem*/
    background-color: #4993f8;
    border-radius: 10px;
    color: #ffffff;
    padding: 0 30px;/*rem*/
  }
</style>
